<template>
  <div ref="markdownRef" style="min-height: 300px;"/>
</template>
<script setup lang="ts">
  import 'vditor/dist/index.css';
  import Vditor from 'vditor';
  import { useIntervalFn } from '@vueuse/core';
  import { onMounted, ref, watch, toRaw, onUnmounted } from 'vue';

  const emit = defineEmits([
    'update:modelValue',
    'after',
    'focus',
    'blur',
    'esc',
    'ctrlEnter',
    'select',
  ]);

  const props = defineProps({
    options: {
      type: Object,
      default() {
        return {};
      },
    },
    modelValue: {
      type: String,
      default: '',
    },
    isDark: {
      type: Boolean,
      default: true,
    },
  });

  const editor = ref<Vditor | null>(null);
  const markdownRef = ref<HTMLElement | null>(null);

  onMounted(() => {
    editor.value = new Vditor(markdownRef.value as HTMLElement, {
      ...props.options,
      value: props.modelValue,
      cache: {
        enable: false,
      },
      fullscreen: {
        index: 10000,
      },
      toolbar: [
        'headings',
        'bold',
        'italic',
        'strike',
        '|',
        'line',
        'quote',
        'list',
        'ordered-list',
        '|',
        'check',
        'insert-after',
        '|',
        'insert-before',
        'undo',
        'redo',
        'link',
        '|',
        'table',
        'br',
        'fullscreen',
      ],
      // toolbarConfig:{
      //   hide:true
      // },
    //   cdn: 'https://ld246.com/js/lib/vditor',
      after() {
        emit('after', toRaw(editor.value));
      },
      input(value: string) {
        emit('update:modelValue', value);
      },
      focus(value: string) {
        emit('focus', value);
      },
      blur(value: string) {
        emit('blur', value);
      },
      esc(value: string) {
        emit('esc', value);
      },
      ctrlEnter(value: string) {
        emit('ctrlEnter', value);
      },
      select(value: string) {
        emit('select', value);
      },
    });
  });

  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal !== editor.value?.getValue()) {
        editor.value?.setValue(newVal);
      }
    },
  );

  watch(
    () => props.isDark,
    (newVal) => {
      const { pause } = useIntervalFn(() => {
        if (editor.value?.vditor) {
          newVal
            ? editor.value.setTheme('dark', 'dark', 'rose-pine')
            : editor.value.setTheme('classic', 'light', 'github');
          pause();
        }
      }, 20);
    },
  );

  onUnmounted(() => {
    const editorInstance = editor.value;
    if (!editorInstance) return;
    try {
      editorInstance?.destroy?.();
    } catch (error) {
      console.log(error);
    }
  });
</script>
